<template>
    <van-overlay :show="visible" @click="visible = false">
        <div class="wrapper">
            <van-icon name="cross" class="close_btn"  @click="visible = false"/>
            <van-cell-group class="main_panel"  @click.stop>
                <h3 class="title">{{action=='add'?'添加班级':'修改班级'}}</h3>
                <van-form  class="form_panel">
                    <div class="input_content">
                        <van-field   readonly
                                     clickable
                                     label="班级类型"
                                     is-link
                                     v-model="typeText"
                                     input-align="right"
                                     :disabled="action=='upd'"
                                     placeholder="选择班级类型"
                                     @click="action=='add' && (showTypePicker = true)"/>
                        <van-popup v-model="showTypePicker" round position="bottom">
                            <van-picker
                                    show-toolbar
                                    :columns="typeColumns"
                                    value-key="label"
                                    @cancel="showTypePicker = false"
                                    @confirm="typeOnConfirm"
                            />
                        </van-popup>
                        <van-field v-model="dataForm.class_name" is-link label="班级名称" input-align="right"
                                   placeholder="请填写班级名称"/>
                        <van-field
                                readonly
                                clickable
                                label="最弱项"
                                is-link
                                v-model="weakText"
                                input-align="right"
                                placeholder="请选择最弱项"
                                @click="action=='add' && (showWeakPicker = true)"
                                :disabled="action=='upd'"
                        />
                        <van-popup v-model="showWeakPicker" round position="bottom">
                            <van-picker
                                    show-toolbar
                                    :columns="weakColumns"
                                    value-key="label"
                                    @cancel="showWeakPicker = false"
                                    @confirm="weakOnConfirm"
                            />
                        </van-popup>
                    </div>
                    <div class="bottom_btn_group">
                        <van-button  type="" @click.stop="visible = false">取消</van-button>
                        <van-button  icon="completed"  class="success"  type="primary"  @click="dataFormSubmit">提交</van-button>
                    </div>
                </van-form>
            </van-cell-group>
        </div>
    </van-overlay>
</template>

<script>
// @ is an alias to /src
import $api from "@/api/index"
export default {
  name: "courseBuy",
  props:['typeColumns','weakColumns'],
  data() {
    return {
      visible: true,
      showTypePicker: false,
      showWeakPicker: false,
      typeText:'',
      weakText:'',
      dataForm: {
        type: '',
        class_name:'',
        weakest: ''
      },
      btnLoading: false,
      blockLoading: false,
    };
  },
  methods: {
    init (record) {
      const id= record && record.school_class_id
      this.visible = true
      this.action = (id ? 'upd' : 'add')
      this.dataForm.school_class_id = id || "0"
      this.$nextTick(() => {
        this.dataForm={}
        this.typeText=''
        this.weakText=''
        if (id) {
          this.typeText=this.setLabel(record.type, this.typeColumns)
          this.weakText=this.setLabel(record.weakest, this.weakColumns)
          this.dataForm=Object.assign({},record)
        }
      })
    },
    setLabel(value,ArrayObj) {
      const i =ArrayObj.findIndex(item => item.value===value)
      return ArrayObj[i].label
    },
    typeOnConfirm(obj,index){
      this.dataForm.type=obj.value
      this.typeText=obj.label
      this.showTypePicker= false
    },
    weakOnConfirm(obj,index){
      this.dataForm.weakest=obj.value
      this.weakText=obj.label
      this.showWeakPicker= false
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.dataForm.type)
      if(!this.dataForm.type){
        this. $notify({ type: 'danger', message: '请选择班级类型' });
        return false
      }else if(!this.dataForm.class_name){
        this. $notify({ type: 'danger', message: '请填写班级名称' });
        return false
      }else if(!this.dataForm.weakest){
        this. $notify({ type: 'danger', message: '请选择最弱项' });
        return false
    }
      this.$router.push({path:'select_try_course',query:{class_name:this.dataForm.class_name}})
    }
  }
};
</script>
<style lang="scss" scoped>
    ::v-deep .wrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        .banner .banner_left {
            width: 344px;
            height: 298px;
            margin-top: 18px;
            margin-left: 27px;
        }
        .close_btn{
            position: absolute;
            top:24%;
            color: #fff;
            font-size: 55px;
            left: 50%;
            -webkit-transform: translate(-50%,0);
            -moz-transform: translate(-50%,0);
            -ms-transform: translate(-50%,0);
            -o-transform: translate(-50%,0);
            transform: translate(-50%,0);
        }
        .main_panel {
            padding: 0;

            .title {
                margin: 38px 0 0;
                font-size: 30px;
                text-align: center;
                font-weight: bold;
                color: #333333;
                line-height: 36px;
            }
            .input_content{
                padding: 30px 10px;
                .van-cell{
                    padding-left: 20px;
                    padding-right: 20px;
                    &:after{
                        left: 0;
                        right: 0;
                    }
                    .van-field__label{
                        font-size: 26px;
                        color: #777;
                    }
                    .radio{
                        font-size: 28px;
                    }
                }
            }
        }
        .bottom_btn_group{
            display: flex;
            align-items: center;
            justify-content: center;
            .van-button{
                flex: 1;
                height: 84px;
                font-size: 26px;
                border:none;
                &.success{
                    background: linear-gradient(180deg, #64CF86 1%, #15B165 98%);
                }
                &.danger{
                    background: linear-gradient(0deg, #FF5E5E 1%, #FC7C7C 100%);
                }
            }

        }
    }
</style>
